<template>
    <view>
		<!-- 轮播图 -->
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper swiper-car" :indicator-dots="true" :autoplay="true" interval="5000" duration="500" circular="true">
                        <swiper-item>
                            <view class="swiper-item">
								<image src="http://m.360buyimg.com/mobilecms/s750x366_jfs/t1/23112/33/6431/99212/5c540d7fEf8000223/fddb6b047c02ba3d.jpg!cr_1125x549_0_72!q70.jpg.dpg" class="carousel"></image>
							</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item">
								<image src="http://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26046/18/9802/97638/5c8115aeE88ece13f/de12b1a832123a44.jpg!cr_1125x549_0_72!q70.jpg.dpg" class="carousel"></image>
							</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item">
								<image src="http://m.360buyimg.com/mobilecms/s750x366_jfs/t1/16016/35/9498/101379/5c7e847aE9bc577b3/61e6994709db372b.jpg!cr_1125x549_0_72!q70.jpg.dpg" class="carousel"></image>
							</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
		<!-- 分类导航 -->
		<view class="nav">
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/29256/16/1420/4265/5c120d2aE83ef9fd4/ca89a8718704215c.png" mode="widthFix"></image>
				<view class="nav-name">京东超市</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t26635/320/1832919204/11533/a2f9878a/5bee366dN1627d554.png" mode="widthFix"></image>
				<view class="nav-name">海囤全球</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/17169/3/4127/4611/5c2f35cfEd87b0dd5/65c0cdc1362635fc.png" mode="widthFix"></image>
				<view class="nav-name">京东服饰</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/27962/13/1445/4620/5c120b24Edd8c34fe/43ea8051bc50d939.png" mode="widthFix"></image>
				<view class="nav-name">京东生鲜</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t16990/157/2001547525/17770/a7b93378/5ae01befN2494769f.png" mode="widthFix"></image>
				<view class="nav-name">京东到家</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t18454/342/2607665324/6406/273daced/5b03b74eN3541598d.png" mode="widthFix"></image>
				<view class="nav-name">充值缴费</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t22228/270/207441984/11564/88140ab7/5b03fae3N67f78fe3.png" mode="widthFix"></image>
				<view class="nav-name">9.9元拼</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/7068/29/8987/5605/5c120da2Ecae1cc3a/016033c7ef3e0c6c.png" mode="widthFix"></image>
				<view class="nav-name">领券</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t16828/63/2653634926/5662/d18f6fa1/5b03b779N5c0b196f.png" mode="widthFix"></image>
				<view class="nav-name">赚钱</view>
			</view>
			<view class="nav-item">
				<image src="http://m.360buyimg.com/mobilecms/s120x120_jfs/t21481/263/412160889/15938/4246b4f8/5b0cea29N8fb2865f.png" mode="widthFix"></image>
				<view class="nav-name">全部</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<i class="icon">&#xe620;</i>
			<swiper class="swiper swiper-notice" :indicator-dots="false" :autoplay="true" interval="5000" duration="500" :circular="true" :vertical="true">
			    <swiper-item v-for="item in notice" @tap="noticeDetail(item)">
			        <view class="swiper-item">{{item.title}}</view>
			    </swiper-item>
			</swiper>
		</view>
		<!-- 商品获得 -->
		<view class="active">
			<view class="active-item">
				<image src="../../static/active/2.jpg" mode="widthFix"></image>
			</view>
			<view class="active-item">
				<image src="../../static/active/3.jpg" mode="widthFix"></image>
			</view>
			<view class="active-item">
				<image src="../../static/active/4.jpg" mode="widthFix"></image>
			</view>
			<view class="active-item">
				<image src="../../static/active/5.jpg" mode="widthFix"></image>
			</view>
			<view class="active-item">
				<image src="../../static/active/6.jpg" mode="widthFix"></image>
			</view>
			<view class="active-item">
				<image src="../../static/active/1.jpg" mode="widthFix"></image>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item">
				<view class="goods-img">
					<image src="http://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/18865/33/1358/523312/5c1118c0Ebcaa15dc/ed46f22c1480c4e2.jpg!q70.dpg" mode="widthFix"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
			<view class="goods-item">
				<view class="goods-img">
					<image src="http://img14.360buyimg.com/mobilecms/s372x372_jfs/t26737/209/2368433876/122239/3d193eb1/5bffa880Nd9fbeee6.jpg!q70.dpg" mode="widthFix"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
			<view class="goods-item">
				<view class="goods-img">
					<image src="http://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/30784/38/4401/70419/5c7ce6caE00bac944/efa489261476691e.jpg!q70.dpg" mode="widthFix"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
			<view class="goods-item">
				<view class="goods-img">
					<image src="http://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/22138/26/9796/195879/5c8137e8E81810e4d/4e53a347a6b29249.jpg!q70.dpg" mode="widthFix"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
			<view class="goods-item">
				<view class="goods-img">
					<image src="http://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/9584/9/15763/189921/5c6fab0eEad6bd439/62b2a9808391f2ed.jpg!q70.dpg" mode="widthFix"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
			<view class="goods-item">
				<view class="goods-img">
					<image src="http://img14.360buyimg.com/mobilecms/s372x372_jfs/t26737/209/2368433876/122239/3d193eb1/5bffa880Nd9fbeee6.jpg!q70.dpg" mode="widthFix"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
			<view class="goods-item">
				<view class="goods-img">
					<image src="http://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/18865/33/1358/523312/5c1118c0Ebcaa15dc/ed46f22c1480c4e2.jpg!q70.dpg" mode="widthFix"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
			<view class="goods-item">
				<view class="goods-img">
					<image src="http://img14.360buyimg.com/mobilecms/s372x372_jfs/t26737/209/2368433876/122239/3d193eb1/5bffa880Nd9fbeee6.jpg!q70.dpg" mode="widthFix"></image>
				</view>
				<view class="goods-name">2019秋冬女装春装新款上衣连衣裙百搭打</view>
				<view class="goods-set">
					<text class="goods-price">￥200.23</text>
					<text class="add-cart icon">&#xe600;</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
    data() {
        return {
			notice : [],
        }
    },
	onLoad() {
		this.getData();
	},
    methods: {
		getData(){
			this.ajax('Announces/index',{
				data:{},
				success:(res) => {
					res = res.data;
					this.notice = res.info;
				}
				
			})
		},
		noticeDetail(item){
			uni.navigateTo({
				url:"../notice/index?data="+JSON.stringify(item)
			})
		}
    }
}
</script>

<style>
	.carousel{width: 100%;}
	.swiper-car,.swiper-car .swiper-item,.swiper-car .carousel{height:500upx;}
	.nav,.notice,.active{width: calc(100% - 80upx);padding:20upx;margin:20upx;background: #FFFFFF;overflow: hidden;border-radius: 10upx;box-shadow: 0 1px 1px rgba(26, 26, 26, .2);}
	.nav{margin-top: -40upx;position: relative;z-index: 999;border-radius: 20upx;}
	.nav-item{float: left;width: 20%;text-align: center;margin-top: 20upx;}
	.nav-item image{width:60%;}
	.nav-name{font-size: 30upx;color:#666666}
	.notice{height:80upx}
	.swiper-notice{height:80upx;overflow: hidden;background: #FFFFFF;line-height: 80upx;font-size: 30upx;margin:0;}
	.notice{padding:0 20upx;line-height: 80upx;}
	.notice .icon{float:left;font-size: 40upx;margin-right: 20upx;color:#F56C6C}
	.goods-list{margin-top:20upx;overflow: hidden;padding-bottom: 20upx;}
	.goods-item{width: calc(50% - 70upx);float:left;margin:0 0 20upx 20upx;height: 500upx;border-radius: 10upx;box-shadow: 0 1px 1px rgba(26, 26, 26, .2);background: #FFFFFF;padding:20upx;}
	.goods-img{width: 100%;overflow: hidden;height:400upx;}
	.goods-img image{width: 100%;height: 100%;}
	.goods-name{font-size: 30upx;height: 40upx;overflow: hidden;}
	.goods-set{height:60upx;line-height:60upx}
	.goods-price{color:#F56C6C;font-size: 30upx;}
	.add-cart{float:right;color:#F56C6C}
	.active-item{float: left;width: calc(33% - 10upx);padding:5upx;margin-top:0;}
	.active-item image{width: 100%;}
</style>
